import React from "react";
import { Typography, Card, Divider, Alert, Space } from "antd";
import UserInfoDemo from "./UserInfoDemo";
import "./UserStorePage.css";

const { Title, Paragraph } = Typography;

const UserStorePage: React.FC = () => {
  return (
    <div className="page-container">
      <Title level={2}>用户信息持久化存储</Title>

      <Card className="section-card">
        <Typography>
          <Title level={4}>基于Zustand的用户信息管理</Title>
          <Paragraph>
            这个示例展示了如何使用Zustand来管理用户的状态，包括用户信息储存、持久化、认证状态管理等。
            通过Zustand的持久化功能，用户登录后的信息会被保存在浏览器本地存储中，
            即使刷新页面也能保持登录状态。
          </Paragraph>

          <Alert
            message="功能特点"
            description={
              <ul>
                <li>用户状态集中管理，支持多组件共享</li>
                <li>自动持久化用户信息，刷新页面不丢失登录状态</li>
                <li>与现有认证系统无缝集成</li>
                <li>支持动态更新用户信息</li>
                <li>类型安全，完全支持TypeScript</li>
              </ul>
            }
            type="info"
            showIcon
          />
        </Typography>
      </Card>

      <Divider orientation="left">实例演示</Divider>

      <UserInfoDemo />

      <Divider orientation="left">实现说明</Divider>

      <Card className="section-card">
        <Typography>
          <Title level={4}>1. 创建用户状态存储</Title>
          <Paragraph>
            使用Zustand的persist中间件实现持久化存储，保存用户登录状态和信息：
          </Paragraph>
          <pre>
            {`import { create } from 'zustand';
import { persist } from 'zustand/middleware';

export const useUserStore = create(
  persist(
    (set) => ({
      // 用户状态
      id: null,
      username: null,
      roles: [],
      isAuthenticated: false,
      
      // 方法
      setUser: (user) => set({ ...user, isAuthenticated: true }),
      clearUser: () => set({ id: null, username: null, roles: [], 
                            isAuthenticated: false }),
    }),
    { name: 'user-storage' } // localStorage中的键名
  )
);`}
          </pre>

          <Title level={4}>2. 集成认证服务</Title>
          <Paragraph>在现有的认证服务中集成状态管理：</Paragraph>
          <pre>
            {`import { useUserStore } from "../stores/userStore";

class AuthService {
  async login(username: string, password: string): Promise<User> {
    // 验证通过后保存用户信息
    const user = await apiLogin(username, password);
    useUserStore.getState().setUser({
      id: user.id,
      username: user.username,
      roles: user.roles,
      permissions: user.permissions,
    });
    return user;
  }
  
  logout(): void {
    // 退出时清除用户信息
    useUserStore.getState().clearUser();
  }
  
  getIsAuthenticated(): boolean {
    return useUserStore.getState().isAuthenticated;
  }
}`}
          </pre>

          <Title level={4}>3. 在组件中使用</Title>
          <Paragraph>在React组件中直接使用用户状态：</Paragraph>
          <pre>
            {`import { useUserStore } from '../stores/userStore';

function UserProfile() {
  // 直接获取状态和方法
  const { username, roles, isAuthenticated, updateUser } = useUserStore();
  
  // 可以选择性订阅部分状态以优化性能
  const isAdmin = useUserStore(state => 
    state.roles.includes('admin')
  );
  
  return (
    <div>
      {isAuthenticated ? (
        <>
          <h2>欢迎, {username}</h2>
          <p>角色: {roles.join(', ')}</p>
          {isAdmin && <p>您拥有管理员权限</p>}
        </>
      ) : (
        <p>请登录</p>
      )}
    </div>
  );
}`}
          </pre>
        </Typography>
      </Card>

      <Card className="section-card" style={{ marginTop: 16 }}>
        <Space direction="vertical" style={{ width: "100%" }}>
          <Alert
            message="提示"
            description="刷新页面后，登录状态会被保持。这是通过Zustand的persist中间件实现的，它将状态存储在localStorage中。"
            type="info"
          />

          <Alert
            message="最佳实践"
            description={
              <ul>
                <li>避免在store中保存敏感信息（如未加密的密码）</li>
                <li>对于大型应用，考虑将用户状态进一步拆分为不同领域</li>
                <li>与后端API结合使用，实现token自动刷新等高级功能</li>
              </ul>
            }
            type="success"
          />
        </Space>
      </Card>
    </div>
  );
};

export default UserStorePage;
